<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element UI 布局</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        
        .header {
            height: 80px;
            display: flex;
            align-items: center;
            background-color: #f5f7fa;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.04);
        }
        
        .header-left {
            flex: 1;
            display: flex;
            align-items: center;
            padding-left: 20px;
        }
        
        .header-right {
            width: 200px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 20px;
        }
        
        .main {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
        }
        
        .grid-item {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
            padding: 15px;
            display: flex;
            flex-direction: column;
        }
        
        .footer {
            height: 60px;
            background-color: #f5f7fa;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12), 0 0 3px rgba(0, 0, 0, 0.04);
        }
        
        .chart-container {
            flex: 1;
            width: 100%;
            height: 100%;
        }
        
        .chart-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 上部 -->
        <div class="header">
            <div class="header-left">
                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner is-link">首页</span>
                </span>
                <span class="el-breadcrumb__separator">/</span>
                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner is-link">数据统计</span>
                </span>
                <span class="el-breadcrumb__separator">/</span>
                <span class="el-breadcrumb__item">
                    <span class="el-breadcrumb__inner">数据看板</span>
                </span>
            </div>
            
            <div class="header-right">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>选项1</el-dropdown-item>
                        <el-dropdown-item>选项2</el-dropdown-item>
                        <el-dropdown-item>选项3</el-dropdown-item>
                        <el-dropdown-item disabled>选项4(禁用)</el-dropdown-item>
                        <el-dropdown-item divided>选项5</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        
        <!-- 中部 -->
        <div class="main">
            <!-- 第一行 -->
            <div class="grid-item">
                <div class="chart-title">用户增长趋势</div>
                <div class="chart-container" ref="chart1"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">销售业绩</div>
                <div class="chart-container" ref="chart2"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">用户分布</div>
                <div class="chart-container" ref="chart3"></div>
            </div>
            
            <!-- 第二行 -->
            <div class="grid-item">
                <div class="chart-title">订单统计</div>
                <div class="chart-container" ref="chart4"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">转化率</div>
                <div class="chart-container" ref="chart5"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">收入来源</div>
                <div class="chart-container" ref="chart6"></div>
            </div>
            
            <!-- 第三行 -->
            <div class="grid-item">
                <div class="chart-title">用户活跃度</div>
                <div class="chart-container" ref="chart7"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">留存率</div>
                <div class="chart-container" ref="chart8"></div>
            </div>
            <div class="grid-item">
                <div class="chart-title">用户行为热图</div>
                <div class="chart-container" ref="chart9"></div>
            </div>
        </div>
        
        <!-- 下部 -->
        <div class="footer">
            <div>
                <p>© 2023 数据分析系统 | 技术支持: data@example.com</p>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            mounted() {
                this.initCharts();
                window.addEventListener('resize', this.handleResize);
            },
            methods: {
                initCharts() {
                    // 初始化所有图表
                    this.initChart1();
                    this.initChart2();
                    this.initChart3();
                    this.initChart4();
                    this.initChart5();
                    this.initChart6();
                    this.initChart7();
                    this.initChart8();
                    this.initChart9();
                },
                
                initChart1() {
                    const chart = echarts.init(this.$refs.chart1);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '新用户',
                            data: [820, 932, 901, 934, 1290, 1330],
                            type: 'bar'
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart2() {
                    const chart = echarts.init(this.$refs.chart2);
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: ['1月', '2月', '3月', '4月', '5月', '6月']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '销售额',
                            type: 'line',
                            data: [120, 132, 101, 134, 90, 230]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart3() {
                    const chart = echarts.init(this.$refs.chart3);
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [{
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 1048, name: '华东' },
                                { value: 735, name: '华北' },
                                { value: 580, name: '华南' },
                                { value: 484, name: '西南' },
                                { value: 300, name: '东北' }
                            ]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart4() {
                    const chart = echarts.init(this.$refs.chart4);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: ['电子产品', '服装', '食品', '家居', '美妆']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '订单量',
                            type: 'bar',
                            data: [1200, 800, 1500, 600, 1000]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart5() {
                    const chart = echarts.init(this.$refs.chart5);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: ['1月', '2月', '3月', '4月', '5月', '6月']
                        },
                        yAxis: {
                            type: 'value',
                            max: 100
                        },
                        series: [{
                            name: '转化率',
                            type: 'bar',
                            data: [5.2, 4.8, 6.5, 5.9, 6.8, 7.3]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart6() {
                    const chart = echarts.init(this.$refs.chart6);
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [{
                            name: '收入来源',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            },
                            data: [
                                { value: 2654, name: '直接销售' },
                                { value: 1900, name: '推广活动' },
                                { value: 1134, name: '会员订阅' },
                                { value: 710, name: '其他' }
                            ]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart7() {
                    const chart = echarts.init(this.$refs.chart7);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: ['1月', '2月', '3月', '4月', '5月', '6月']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '日活跃用户',
                            type: 'line',
                            data: [5000, 6200, 7000, 8500, 9200, 10500]
                        }, {
                            name: '月活跃用户',
                            type: 'line',
                            data: [15000, 18000, 22000, 24000, 26000, 30000]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart8() {
                    const chart = echarts.init(this.$refs.chart8);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            data: ['第1天', '第7天', '第14天', '第30天']
                        },
                        yAxis: {
                            type: 'value',
                            max: 100
                        },
                        series: [{
                            name: '留存率',
                            type: 'line',
                            data: [100, 65, 30, 15]
                        }]
                    };
                    chart.setOption(option);
                },
                
                initChart9() {
                    const chart = echarts.init(this.$refs.chart9);
                    const option = {
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: ['首页', '产品页', '详情页', '支付页', '购物车', '个人中心']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '访问量',
                            type: 'bar',
                            data: [8200, 4500, 3000, 1200, 2000, 1500]
                        }]
                    };
                    chart.setOption(option);
                },
                
                handleResize() {
                    this.resizeCharts();
                },
                
                resizeCharts() {
                    // 调用每个图表的 resize 方法
                    const charts = [this.$refs.chart1, this.$refs.chart2, this.$refs.chart3,
                                   this.$refs.chart4, this.$refs.chart5, this.$refs.chart6,
                                   this.$refs.chart7, this.$refs.chart8, this.$refs.chart9];
                    
                    charts.forEach(chart => {
                        if (chart && chart.resize) {
                            chart.resize();
                        }
                    });
                }
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResize);
            }
        });
    </script>
</body>
</html>
